<template>
    <div>
        <el-form-item label="图片轮播">
            <draggable
                tag="ul"
                :list="data.options.options"
                v-bind="{group:{ name:'options'}, ghostClass: 'ghost',handle: '.drag-item'}"
                handle=".drag-item"
            >
                <li v-for="(item, index) in data.options.options" :key="index" >
                    <el-input v-model="item.src"/>
                    <i class="drag-item"><i class="iconfont2 icon-icon_bars"/></i>
                    <el-button @click="handleOptionsRemove(index)" circle plain type="danger" size="mini" icon="el-icon-minus" style="padding: 4px;margin-left: 5px;"/>

                </li>
            </draggable>
            <el-button type="text" @click="handleAddOption">添加选项</el-button>
        </el-form-item>
    </div>
</template>
<script>
import Draggable from 'vuedraggable'
export default {
    name: 'BaseSwiper',
    components: {
        Draggable
    },
    props: {
        data: {
            type: Object
        }
    },
    methods: {
        handleAddOption() {
            this.data.options.options.push({
                src: '图片地址',
                label: '新轮播'
            })
        },
        handleOptionsRemove(index) {
            this.data.options.options.splice(index, 1)
        }
    }
}
</script>
